<template>
    <div class="loanDetail">
      <!--放款失败-->
      <div class="item status1">
        <p class="top">放款时间为: 2017-11-08 10:54</p>
        <p class="bottom">放款金额:1000.00元</p>
        <div class="icon-wrapper">
          <div class="icon"></div>
          <div class="status">放款失败</div>
        </div>
      </div>
      <!--放款成功-->
      <div class="item status2">
        <p class="top">放款时间为: 2017-11-08 10:54</p>
        <p class="bottom">放款金额:1000.00元</p>
        <div class="icon-wrapper">
          <div class="icon"></div>
          <div class="status">放款成功</div>
        </div>
      </div>
      <!--未逾期还部分-->
      <div class="item status3">
        <div class="top">
          <div class="start">
            <p class="time">贷款时间：2017-11-8 10：54</p>
            <p class="count">贷款金额： 1000.00元</p>
          </div>
          <div class="end">
            <p class="time">贷款时间：2017-11-8 10：54</p>
            <p class="count">贷款金额： 1000.00元</p>
          </div>
        </div>
        <div class="bottom">
          <div class="time">已还款时间：2017-11-8 10：54</div>
          <div class="count">已还款金额： 1000.00元</div>
          <div class="icon-wrapper">
            <div class="icon"></div>
            <div class="status">已还部分款</div>
          </div>
        </div>
      </div>
      <!--未逾期全还-->
      <div class="item status4">
        <div class="top">
          <div class="start">
            <p class="time">贷款时间：2017-11-8 10：54</p>
            <p class="count">贷款金额： 1000.00元</p>
          </div>
          <div class="end">
            <p class="time">贷款时间：2017-11-8 10：54</p>
            <p class="count">贷款金额： 1000.00元</p>
          </div>
        </div>
        <div class="bottom">
          <div class="time">已还款时间：2017-11-8 10：54</div>
          <div class="count">已还款金额： 1000.00元</div>
          <div class="icon-wrapper">
            <div class="icon"></div>
            <div class="status">已还款</div>
          </div>
        </div>
      </div>
      <!--逾期还部分-->
      <div class="item status5">
        <div class="top">
          <div class="start">
            <p class="time">贷款时间：2017-11-8 10：54</p>
            <p class="count">贷款金额： 1000.00元</p>
          </div>
          <div class="end">
            <p class="time">贷款时间：2017-11-8 10：54</p>
            <p class="count">贷款金额： 1000.00元</p>
          </div>
        </div>
        <div class="bottom">
          <div class="time">已还款时间：2017-11-8 10：54</div>
          <div class="count">已还款金额： 1000.00元</div>
          <div class="icon-wrapper">
            <div class="icon"></div>
            <div class="status">逾期已还款</div>
          </div>
        </div>
      </div>
      <!--逾期全还-->
      <div class="item status6">
        <div class="top">
          <div class="start">
            <p class="time">贷款时间：2017-11-8 10：54</p>
            <p class="count">贷款金额： 1000.00元</p>
          </div>
          <div class="end">
            <p class="time">贷款时间：2017-11-8 10：54</p>
            <p class="count">贷款金额： 1000.00元</p>
          </div>
        </div>
        <div class="bottom">
          <div class="time">已还款时间：2017-11-8 10：54</div>
          <div class="count">已还款金额： 1000.00元</div>
          <div class="icon-wrapper">
            <div class="icon"></div>
            <div class="status">逾期已还部分款</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "loanDetail"
    }
</script>
<style scoped lang="stylus">
  .loanDetail
    height calc(100% - 64px)
    background #f4f4f4
    padding 10px
    overflow auto
    .item
      border-radius 6px
      background #ffffff
      padding 10px
      position relative
      margin-bottom 10px
      &.status1
        position relative
        text-align left
        height 52px
        .top
          font-size 14px
          color #333333
          padding-top 8px
        .bottom
          padding-top 9px
          font-size 14px
          color #4B4B4B
        .icon-wrapper
          position absolute
          top -2px
          right 19px
          height 62px
          width 56px
          text-align center
          .icon
            margin 0 auto
            height 42px
            width 34px
            background url("icon001.svg") no-repeat center /34px 42px
          .status
            height 20px
            line-height 20px
            color #FF2727
            font-size 14px
      &.status2
        position relative
        text-align left
        height 52px
        .top
          font-size 14px
          color #333333
          padding-top 8px
        .bottom
          padding-top 9px
          font-size 14px
          color #4B4B4B
        .icon-wrapper
          position absolute
          top -2px
          right 19px
          height 62px
          width 56px
          text-align center
          .icon
            margin 0 auto
            height 42px
            width 34px
            background url("icon002.svg") no-repeat center /34px 42px
          .status
            height 20px
            line-height 20px
            color #57B557
            font-size 14px
      &.status3
        background none
        padding 0
        text-align left
        .top
          background #ffffff
          padding 10px
          border-radius 6px
          margin-bottom 10px
          .start
            margin-bottom 23px
          .time,.count
            height 20px
            line-height 20px
            font-size 14px
            color #4B4B4B
        .bottom
          position relative
          background #ffffff
          border-radius 6px
          padding 10px
          .time,.count
            height 20px
            line-height 20px
            font-size 14px
            color #4b4b4b
          .time
            margin-bottom 3px
          .icon-wrapper
            position absolute
            top -2px
            right 14px
            height 62px
            width 70px
            text-align center
            .icon
              margin 0 auto
              height 42px
              width 34px
              background url("icon003.svg") no-repeat center /34px 42px
            .status
              height 20px
              line-height 20px
              color #57B557
              font-size 14px
      &.status4
        background none
        padding 0
        text-align left
        .top
          background #ffffff
          padding 10px
          border-radius 6px
          margin-bottom 10px
          .start
            margin-bottom 23px
          .time,.count
            height 20px
            line-height 20px
            font-size 14px
            color #4B4B4B
        .bottom
          position relative
          background #ffffff
          border-radius 6px
          padding 10px
          .time,.count
            height 20px
            line-height 20px
            font-size 14px
            color #4b4b4b
          .time
            margin-bottom 3px
          .icon-wrapper
            position absolute
            top -2px
            right 19px
            height 62px
            width 56px
            text-align center
            .icon
              margin 0 auto
              height 42px
              width 34px
              background url("icon003.svg") no-repeat center /34px 42px
            .status
              height 20px
              line-height 20px
              color #57B557
              font-size 14px


      &.status5
        background none
        padding 0
        text-align left
        .top
          background #ffffff
          padding 10px
          border-radius 6px
          margin-bottom 10px
          .start
            margin-bottom 23px
          .time,.count
            height 20px
            line-height 20px
            font-size 14px
            color #4B4B4B
        .bottom
          position relative
          background #ffffff
          border-radius 6px
          padding 10px
          .time,.count
            height 20px
            line-height 20px
            font-size 14px
            color #4b4b4b
          .time
            margin-bottom 3px
          .icon-wrapper
            position absolute
            top -2px
            right 19px
            height 62px
            width 56px
            text-align center
            .icon
              margin 0 auto
              height 42px
              width 34px
              background url("icon004.svg") no-repeat center /34px 42px
            .status
              height 20px
              line-height 20px
              color #FF723F
              font-size 14px
      &.status6
        background none
        padding 0
        text-align left
        .top
          background #ffffff
          padding 10px
          border-radius 6px
          margin-bottom 10px
          .start
            margin-bottom 23px
          .time,.count
            height 20px
            line-height 20px
            font-size 14px
            color #4B4B4B
        .bottom
          position relative
          background #ffffff
          border-radius 6px
          padding 10px
          .time,.count
            height 20px
            line-height 20px
            font-size 14px
            color #4b4b4b
          .time
            margin-bottom 3px
          .icon-wrapper
            position absolute
            top -2px
            right 19px
            height 62px
            width 56px
            text-align center
            .icon
              margin 0 auto
              height 42px
              width 34px
              background url("icon004.svg") no-repeat center /34px 42px
            .status
              height 20px
              line-height 20px
              color #FF723F
              font-size 14px


</style>
